<template>
  <div class="lib-list">
    <v-section />
    <v-divider type="h">横挺</v-divider>
    <v-divider type="v">竖梃</v-divider>
  </div>
</template>
<script>
import { mapMutations, mapGetters, mapState } from 'vuex'

import VDivider from '@/components/libListItems/VDivider.vue'
import VSection from '@/components/libListItems/VSection.vue'
const attrs = require.context('@/components/ui/', false, /\.js$/)
const componentsAttrs = new Map()
attrs.keys().forEach((fileName) => {
  const componentName = fileName.slice(fileName.lastIndexOf('/') + 1, -3)
  const componentConfig = attrs(fileName)
  componentsAttrs.set(componentName, componentConfig.default)
})

export default {
  components: { VDivider, VSection },
  data: () => ({
    dragging: false,
    currentName: '',
    visible: false,
  }),
  computed: {
    ...mapGetters(['selectedSection', 'components', 'selectedDivider']),
    ...mapState(['components', 'selectedDivider']),
  },
  mounted() {},
  methods: {
    ...mapMutations(['addComponent', 'updateDivider']),

    handleAddDivider(type) {
      // const guid = this.guid('Devider')
      // const size = 15
      //
      // const data = {
      //   name: 'Devider',
      //   guid,
      //   props: {
      //     x: 0,
      //     y: 0,
      //     width,
      //     height,
      //     id: guid,
      //   },
      //   children: [],
      // }
    },
  },
}
</script>
<style>
.lib-list {
  width: 160px;
  height: calc(100vh - 40px);
  font-size: 0;
  padding: 5px;
  border-right: 1px solid #e5e5e5;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: left;
}

.lib-list .c-item {
  position: relative;
  text-align: center;
  display: inline-block;
  width: 33%;
  height: 50px;
  font-size: 12px;
  margin-bottom: 6px;
  float: left;
}

.lib-list .c-item:hover,
.lib-list .c-item.active {
  border-radius: 3px;
  background: rgba(40, 120, 255, 0.1);
  color: #2878ff;
}

.lib-item__icon {
  display: inline-block;
  margin-top: 4px;
  height: 28px;
  width: 28px;
  font-size: 26px;
}

.hidden {
  display: none;
}
</style>
